<template>
	<view
		class="ellipsis-tip-container"
		id="ellipsis-tip-container"
		:style="'top:' + top + 'px;opacity: ' + opacity + ';display: ' + (show ? 'block' : 'none') + ';right: ' + right + 'px;'"
	>
		<view class="ellipsis-tip-content">{{ content }}</view>
		<view class="down-arrow"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			top: 0,
			opacity: 0,
			timer: null,
			show: false
		};
	},
	props: {
		content: {
			type: String
		},
		right: {
			type: Number,
			default: 40
		}
	},
	methods: {
		openTips(top) {
			clearTimeout(this.timer);
			this.show = true;
			this.$nextTick(() => {
				uni.createSelectorQuery()
					.in(this)
					.select('#ellipsis-tip-container')
					.boundingClientRect((rect) => {
						this.top = top - 10 <= rect.height ? 0 : top - rect.height - 10;
						this.opacity = 1;
						this.timer = setTimeout(() => {
							this.opacity = 0;
							this.show = false;
						}, 2000);
					})
					.exec();
			});
		},
		closeTip() {
			clearTimeout(this.resetTimer);
			if (this.opacity && this.show) {
				this.opacity = 0;
				this.show = false;
			}
		}
	},
	created: function () {}
};
</script>
<style>
.ellipsis-tip-container {
	max-width: 300rpx;
	background: #303133;
	color: #fff;
	border-radius: 8rpx;
	z-index: 999999;
	position: absolute;
	padding: 20rpx;
	word-wrap: break-word;
	font-size: 24rpx;
	text-align: justify;
}

.down-arrow {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px;
	border-color: transparent;
	border-top-color: #303133;
	left: 50%;
	bottom: -12px;
	transform: translateX(-50%);
}
</style>
